<template>
	<view>
		<view class="uni-comment-list">
			<view class="uni-comment-face">
				<image :src="reComments.avatarUrl" class="avatar-comm-img"></image>
			</view>
			<view class="uni-comment-body">
				<view class="uni-comment-top comment-nickname">
					<text>{{reComments.nickName}}</text>
				</view>
				<view class="uni-comment-date comment-date">
					<text>{{sendTime(reComments.sendTime)}}</text>
				</view>
				<view class="uni-comment-content comment-content" @click="clickReplayComment">
					<text v-if="reComments.commentLevel == 3">回复</text>
					<text v-if="reComments.commentLevel == 3" style="color: #999;padding: 0 2px 0 6px;">{{reComments.toNickname}}:&nbsp;</text>
					<text>{{reComments.commentContent}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		props:{
			reComments:{
				type:Object,
				default:function(){
					return {}
				}
			}
		},
		created() {
		},
		methods:{
			sendTime(time){
				return this.$utils.dateTime(time)
			},
			clickReplayComment(){
				this.$emit("clickReplayComment",{...this.reComments})
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.uni-comment-list{
		.uni-comment-face{
			width: 60rpx;
			height: 60rpx;
			.avatar-comm-img{
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
			}
		}
		.uni-comment-body{
			.comment-nickname{
				padding: 0;
				font-size: 20rpx;
				text{
					color: $fun-text-6-color;
				}
			}
			.comment-date{
				font-size: 16rpx;
				color: $fun-text-9-color;
			}
			.comment-content{
				font-size: 24rpx;
				color: $fun-text-color;
			}
			.fun-comment-reply{
				display: flex;
				flex-wrap: wrap;
				font-size: 24rpx;
				color: $fun-text-color;
				margin-top: 4rpx;
				background-color: #F2F2F2;
				border-radius: 5rpx;
				padding: 20rpx;
				.reply-nickname{
					color: $fun-link-text-color;
				}
				.reply-content{
					
				}
			}
		}
	}
</style>
